<script setup lang='ts'>
import Header from '@/components/Header.vue'
import { onMounted, ref } from 'vue';
import { useHomeStore } from '@/stores/home'
import { computed } from '@vue/reactivity';
import moment from 'moment'
// 引入封装的组件
import GoodsListVue from '@/components/GoodsListVue.vue'
//调用homeStore
const homeStore = useHomeStore();

// TODO 下拉刷新
const refresh = ref(false);
const onRefresh = () => {
    // 刷新前先把数据清空

    getRequest()
    refresh.value = false;
};

// TODO 封装请求函数
const getRequest = () => {

    //发送banner的请求
    homeStore.getBannerListHandler();
    //发送grid请求
    homeStore.getGridListHandler();
    // 发请求获取秒杀数据
    homeStore.getSeckilllistHandler({ count: 1, limitNum: 10 });
    //获取商品列表数据
    homeStore.getGoodsListHandler({ count: 1, limitNum: 10 });
}

//TODO 在mounted里面发送请求
onMounted(() => {
    // 调用请求函数
    getRequest()
})

//TODO 获取轮播数据
const BannerList = computed(() => {
    return homeStore.bannerList
})
//TODO 获取宫格数据
const GridList = computed(() => {
    return homeStore.gridList
})
//TODO 获取秒杀数据
const Seckilllist = computed(() => {
    return homeStore.seckilllist
})
//TODO 计算属性计算距离12点的毫秒值
const time = computed(() => {
    return +new Date(moment().endOf("day").format("YYYY-MM-DD 00:00:00")) + 24 * 60 * 60 * 1000 - +new Date()
})

// TODO 商品
const loading = ref(false);//加载的效果
const count = ref(1) //触发刷新获取后面一页的数据
const finished = ref(false); //不刷新了
const onLoad = async () => {
    loading.value = true
    count.value++
    //再次发送请求
    try {
        await homeStore.getGoodsListHandler({ count: count.value, limitNum: 10 });
    } catch {
        finished.value = true;
    }
    GoodsList
    loading.value = false;
};

//TODO 获取商品数据
const GoodsList = computed(() => {
    return homeStore.goodsList
})
</script>
<template>
    <div class="home">
        <!-- TODO 头部组件 -->
        <Header></Header>
        <!-- 下拉刷新 -->
        <van-pull-refresh v-model="refresh" success-text="刷新成功" @refresh="onRefresh">

            <!-- 轮播图 -->
            <!-- 懒加载 -->
            <div class="banner">
                <van-swipe :autoplay="3000" lazy-render :show-indicators=true indicator-color="#ffffff">
                    <van-swipe-item v-for="banner in BannerList" :key="(banner as any).bannerid">
                        <img class="img" :src="(banner as any).img" />
                    </van-swipe-item>
                </van-swipe>
            </div>
            <van-grid :column-num="5">
                <van-grid-item v-for="item in GridList" :key="(item as any).id" :icon="(item as any).url"
                    :text="(item as any).text" />
            </van-grid>
            <!-- TODO 秒杀 -->
            <div class="miaosha">
                <header>
                    <span>京东秒杀</span>
                    <p>
                        <span>0</span>
                        <img src="./img/dc.png" alt="">
                    </p>
                    <van-count-down millisecond :time="time" format="HH:mm:ss:SS">
                        <template #default="timeData">
                            <span class="block">{{ timeData.hours < 10 ? '0' + timeData.hours : timeData.hours }}</span>
                                    <span class="colon">:</span>
                                    <span class="block">{{ timeData.minutes < 10 ? '0' + timeData.minutes :
                                            timeData.minutes
                                    }}</span>
                                            <span class="colon">:</span>
                                            <span class="block">{{ timeData.seconds
                                                    < 10 ? '0' + timeData.seconds : timeData.seconds
                                            }}</span>
                                                    <span class="colon">:</span>
                                                    <span class="block">{{ timeData.milliseconds }}</span>
                        </template>
                    </van-count-down>
                </header>
                <div class="miaoshabottom">
                    <div class="item" v-for="item in Seckilllist" :key="(item as any).proid">
                        <img :src="(item as any).img1" alt="">
                        <p>¥ {{ (item as any).originprice }}</p>
                    </div>
                </div>
            </div>


            <!-- TODO 商品列表 -->
            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <!-- <div class="goodsList">
                <div class="goodsListItem" v-for="item in GoodsList" :key="(item as any).proid" @click="$router.push(`/detail/${(item as any).proid}`)">
                    <img :src="(item as any).img1" alt="">
                    <p>{{ (item as any).desc }}</p>
                    <span>¥{{ (item as any).originprice }}</span>
                </div>
            </div> -->
             <GoodsListVue :GoodsList="GoodsList"></GoodsListVue>
            </van-list>
        </van-pull-refresh>
    </div>
</template>
<style scoped lang="scss">
header{
    margin-bottom: 20px;
}
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;

}

.img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 20px;
}

:deep(.van-grid-item__content) {
    background-color: #F6F6F6;
}

.banner {
    padding: 20px;
}

.miaosha {
    background-color: #fff;
    padding: 0 10px;

    header {
        display: flex;
        align-items: center;
        font-size: 18px;
        font-weight: 700;

        p {
            font-weight: 400;
            display: flex;
            align-items: center;
            margin: 0 20px;
            color: red;

            img {
                width: 40px;
                height: 40px;
            }
        }
    }

    .miaoshabottom {
        display: flex;

        .item {
            margin-right: 10px;

            img {
                width: 100px;
                height: 100px;
            }

            p {
                color: #F45533;
                font-size: 16px;
                font-weight: 700;
            }
        }
    }
}

.colon {
    display: inline-block;
    margin: 0 4px;
    color: #ee0a24;
}

.block {
    display: inline-block;
    width: 26px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #ee0a24;
}

// 商品详情
.van-list {
    margin-bottom: 100px;
}
</style>